<!-- 招聘信息页面 -->
<template>
  <div class="root_style">
      <!-- 头部菜单 -->
      <reception-header/>

      <div class="user">
        <div class="da-wrapper">
          <div class="da-content">
            <!-- 头部搜索 -->
            <div class="form-style">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="formInline.companyName" placeholder="请输入公司名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入工作名称" v-model="formInline.positionName" class="input-with-select" clearable>
                    <el-select v-model="formInline.recruitType" slot="prepend" placeholder="实习or全职" clearable>
                      <el-option label="实习" value="实习"></el-option>
                      <el-option label="全职" value="全职"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>

              <!-- 招聘信息列表 -->
              <div class="recruit-container">
                <div  @click="toRecruitDetailHandle(item.companyAid,item.recruitmentInfoAid)" class="recruit-div" v-for="(item,index) in companyRecruitList" :key="index">
                  <el-row>
                    <el-col :span="12">
                      <span class="pos-style">{{item.position}}<el-tag effect="dark" type="success" size="mini" class="xiao-style">校</el-tag></span>
                    </el-col>
                    <el-col :span="12" class="right-style">
                      <span class="salary_style">{{item.salary}}&emsp;</span>
                      <span class="recruit-type">{{item.recruitType}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-tag effect="plain" type="success" size="mini" class="tagbiaoqian-style">{{item.recruitmentAddress.substr(0,2)}}</el-tag>
                      <el-tag effect="plain" type="success" size="mini" class="tagbiaoqian-style">{{item.experience ? item.experience : '不限经验'}}</el-tag>
                      <el-tag effect="plain" type="success" size="mini" class="tagbiaoqian-style">{{item.education ? item.education : '不限学历'}}</el-tag>
                    </el-col>
                    <el-col :span="12" class="right-style">
                      <span class="company-name">{{item.companyName}}</span>
                      <img class="img-style" src="https://recruitment-files.oss-cn-chengdu.aliyuncs.com/user/hr1.jpg" alt="">
                      <span class="hr-style">HR / {{item.leader}}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>

              <!-- 分页 -->
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageRow"
                :total="total"
                @current-change="page">
              </el-pagination>

            </div>
          </div>
        </div>
      </div>

      <!-- 最底部 -->
      <the-footer/>
  </div>
</template>

<script>
import ReceptionHeader from '../../../components/ReceptionHeader.vue';
import TheFooter from '../../../components/The-Footer.vue';
import { getAllcompanyRecruitList } from '../../../api/recruitmentInfoManage';

export default {
  name: "RecuritInfoPage",
  components:{
    ReceptionHeader,
    TheFooter,
  },
  data(){
    return{
      formInline: {
        companyName: '',
        positionName: '',
        recruitType: '',
      },
      // workName: '',  // 首页传过来的工作名字
      // workType: '',  // 首页传过来的工作类型
      companyRecruitList: [],
      pageRow: 10,
      total: 100,
    }
  },
  created(){
    this.formInline.positionName = this.$route.query.workName;
    this.formInline.recruitType = this.$route.query.workType;
    // 得到全部公司的招聘信息列表
    this.getAllcompanyRecruitListFunc();
  },
  methods:{
    onSubmit() {
       // 发送请求
      const params = {
          companyName: this.formInline.companyName,
          positionName: this.formInline.positionName,
          recruitType: this.formInline.recruitType,
          page: 1,  
          pageRow: this.pageRow, // 每页行数
      }
      getAllcompanyRecruitList(params).then(res=>{
        console.log(res);
        this.companyRecruitList = res.data.data.companyRecruitList;
        this.total = res.data.data.totalNum;
      })
    },
    // 点击职位去招聘职位信息界面
    toRecruitDetailHandle(companyAid,recruitmentInfoAid){
      this.$router.push({
        path: "/reception/recruitInfoDetail",
        query: {
          companyAid: companyAid,
          recruitmentInfoAid: recruitmentInfoAid,
        }
      });
    },

    page(currentPage){
       // 发送请求
      const params = {
          companyName: this.formInline.companyName,
          positionName: this.formInline.positionName,
          recruitType: this.formInline.recruitType,
          page: currentPage,  
          pageRow: this.pageRow, // 每页行数
      }
      getAllcompanyRecruitList(params).then(res=>{
        this.companyRecruitList = res.data.data.companyRecruitList;
        this.total = res.data.data.totalNum;
      })
    },

    // 得到全部公司的招聘信息列表
    getAllcompanyRecruitListFunc(){
       // 发送请求
      const params = {
          companyName: this.formInline.companyName,
          positionName: this.formInline.positionName,
          recruitType: this.formInline.recruitType,
          page: 1,  
          pageRow: this.pageRow, // 每页行数
      }
      getAllcompanyRecruitList(params).then(res=>{
        // console.log(res);
        this.companyRecruitList = res.data.data.companyRecruitList;
        this.total = res.data.data.totalNum;
      })
    },

  },

}
</script>

<style scoped>
@import '../../../assets/css/reception/recruitInfoPage.css';
</style>
